<script>
    import {nav, dom} from '@/store';

    const handleClick = async event => {
        const {gsap} = await import('gsap');
        const navDom = event.target;
        const index = +navDom.getAttribute('data-index');
        const id = navDom.getAttribute('data-id');
        if (!['a'].includes(navDom.nodeName?.toLowerCase())) {
            return;
        }
        nav.set('activeIndex', index);
        gsap.to($dom.rootDom, {duration: 0.5, scrollTo: id, ease: 'power2'});
    }
</script>

<header class="header-root-wrapper row justify-center" on:click={handleClick}>
    <div class="flex flex-row justify-end items-center col-22">
        {#each $nav.list as item, index}
            <a
                data-index={index}
                data-id={item.id}
                class="nav-item {index === $nav.activeIndex ? 'active' : ''}"
                href={item.id}
                on:click|preventDefault={() => {}}
            >{item.label}</a>
        {/each}
    </div>
</header>

<style lang="less">
    .header-root-wrapper {
        position: sticky;
        top: 0;
        left: 0;
        height: 80px;
        background: #fff;
        z-index: 1;

        .nav-item {
            color: #999;
            text-decoration: none;

            &:nth-of-type(n + 2) {
                margin-left: 10px;
            }

            &:hover,
            &.active {
                color: #333;
            }
        }
    }
</style>